<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部内容 -->
      <el-header>
        <div class="header" v-for="(item,index) in data.userData" :key="item.user_id">
          <div class="header-left"><el-avatar shape="square" class="header-left-image" :src="chargingPost" />
            海产品管理系统
          </div>
          <div class="header-middle">
            <div class="header-middle-content">
              <!-- 使用element Plus
                图标需要绑定 -->
              <div class="flod-btn"><el-button color="#9d9fee" size="small" :="isCollapse" @click="toggle"
                  :icon="selected"></el-button>
              </div>
              <!-- 面包屑 -->
              <div class="bread">
                <Breadcrumb></Breadcrumb>
              </div>
            </div>
          </div>
          <div class="header-footer">
            <div class="avtor">
              <el-avatar class="avatar-image" fit="fill" :src="item.avatar" />
            </div>
            <div class="user-name">
              <el-dropdown>
                <span class="el-dropdown-link">
                  欢迎您{{ item.userName }}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown :focus {outline: 0;}>
                  <el-dropdown-menu>
                    <el-dropdown-item>修改信息</el-dropdown-item>
                    <el-dropdown-item @click="Logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- 侧边的内容 -->
        <el-aside :width={}>
          <el-menu :unique-opened="true" router :default-active="activePath" class="el-menu-vertical-demo"
            :collapse="isCollapse" background-color="#001529" active-text-color="green" text-color="white">
            <template v-for="item in dataMessage.menuItems" :key="item.id">
              <!-- 一级菜单 -->
              <el-sub-menu :index="item.url" v-if="item.children">
                <!-- <el-sub-menu :index="item.url" v-if="item.url"> -->
                <template #title>
                  <!-- element Plus 怎么使用动态绑带icon图标 -->
                  <!-- 下面的v-if不能少 -->
                  <el-icon v-if="item.icon">
                    <!-- 动态组件 -->
                    <component :is="item.icon"></component>
                  </el-icon>
                  <span>{{ item.title }}</span>
                </template>
                <!-- 子菜单 -->
                <el-menu-item :index="child.url" v-for="child in item.children" :key="child.url">
                  <el-icon v-if="child.icon">
                    <!-- 动态组件 -->
                    <component :is="child.icon"></component>
                  </el-icon>
                  {{ child.title }}
                </el-menu-item>
              </el-sub-menu>
              <!-- 只能存在一个一级菜单 -->
              <el-menu-item :index="item.url" v-else>
                <!-- <el-menu-item :index="item.url"> -->
                <el-icon>
                  <document />
                </el-icon>
                <span>{{ item.title }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <!-- 中心内容 -->
        <el-main class="middle-content">
          <Tag></Tag>
          <Main></Main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup>
import { onMounted, reactive, ref, watchEffect } from 'vue'
import Main from '../components/Main.vue';

import { GiveFormData,GetDetailUserData } from '../api/user.js';
import Tag from '../components/Tag.vue';

// 引入本地的图片,并不能直接绑定
import avatarImage from '../assets/avatar.jpg'
import chargingPost from '../assets/chargingPost.jpg'
// 头像
import Breadcrumb from '../components/Breadcrumb.vue';
import { useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'


const router = useRouter();
// 解决Vue3.0整合element plus时el-menu导航选中后刷新页面保持当前选中状态 
let activePath = '/home/customer'; // 当前默认激活客户管理界面
const setActivePath = () => { // 获取当前菜单激活路径
  activePath = router.currentRoute._value.fullPath;
}
setActivePath();


// icon图标
// 折叠得展开和伸展
const icons = ['Fold', 'Expand']
const selected = ref('Fold')




// 菜单数据  
const dataMessage = reactive({
  menuItems: [],
  menuIcon: '', // 菜单图标
  message: '',
  typeof: ''
})

// 用户信息
const data=reactive({
  userData:[]
})


const isCollapse = ref(false)

const handleOpen = () => {
  // console.log(key, keyPath)
}
const handleClose = () => {
  // console.log(key, keyPath)
}


// 点击是否菜单折叠
const toggle = () => {
  if (!isCollapse.value) {
    isCollapse.value = true
    selected.value = icons[1]
  } else {
    isCollapse.value = false
    selected.value = icons[0]
  }
}

// 获取菜单数据
watchEffect(async () => {
  await GiveFormData().then(res => {
    dataMessage.menuItems = res.data
    console.log(res.data);
    // generateMenu函数通过递归的方式处理菜单数据，首先遍历菜单数据，找到parentMenuId等于当前父菜单项id的子菜单项，
    // 然后递归地将子菜单项嵌套到当前菜单项中，最后返回生成的菜单数据。这个方法可以适用于将子菜单项嵌套到父菜单中去。
    function generateMenu(menuData, parentId) {
      let menu = [];
      for (let item of menuData) {
        if (item.parentMenuId === parentId) {
          let menuItem = {
            id: item.id,
            title: item.title,
            type: item.type,
            url: item.url,
            icon: item.icon
          };
          let children = generateMenu(menuData, item.id);
          if (children.length > 0) {
            menuItem.children = children;
          }
          menu.push(menuItem);
        }
      }
      return menu;
    }
    // 生成菜单
    const menu = generateMenu(res.data, null);
    console.log(menu);
    dataMessage.menuItems = menu
    dataMessage.typeof = 'success'
    // console.log(menu[0].icon);
  })
})

// 退出登录
const Logout = () => {
  localStorage.clear('jwtToken')

  ElMessage({  //Element Plus 提示框
    showClose: true,
    message: '退出成功',
    center: true,
    type: 'success',
  })

  setTimeout(() => {
    router.push('/login')
  }, 1000)
}

// 获取存储在本地的用户id
onMounted(async()=>{
  await GetDetailUserData({
    user_id:localStorage.getItem('user_id')
  }).then(res=>{
    data.userData=res.data
  })

})



</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;

  .header {
    height: 100%;
    display: flex;
  }

  .header-left {
    display: flex;
    height: 100%;
    width: 178px;
    font-size: 15px;
    font-weight: bold;
    border: 1px solid red;
    justify-content: center;
    align-items: center;
  }

  .header-middle {
    position: relative;
    height: 100%;
    flex: 1;
    border: 1px solid rgb(139, 36, 36);

    .header-middle-content {
      height: 100%;
      width: 100%;
      display: flex;

      .bread {
        display: inline-block;
        font-size: 30px;
        margin-top: 25px;
        margin-left: 20px;
        line-height: 1;
      }
    }


    .flod-btn {
      height: 24px;
      width: 24px;
      margin-top: 18px;
      margin-left: 18px;
    }
  }

  .header-footer {
    display: flex;
    border: 1px solid red;
    height: 100%;
    width: 200px;
    justify-content: center;
    align-items: center;


    .avator {
      width: 40px;
    }

    .user-name {}
  }
}

.el-container {
  height: 100%;
}

.el-header {
  background-color: #ffffff;
  padding: 0px;
}

.el-aside {
  background-color: #001529;
  color: #b3b9bf;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-main {
  padding: 0px;
  height: 100%;
}
</style>